// 1 标签的内容
var con = "习近平总书记指出保护好长江流域生态环境是推动长江经济带高质量发展的前提也是守护好中华文明摇篮的必然要求万里长江浩荡奔涌青藏高原的涓涓细流出群山纳万川汇聚成波涛滚滚的大江造就绮丽风光浇灌延绵良田滋养城市乡村孕育中华文明为中华民族永续发展提供坚实支撑近年来各地区各部门从生态系统整体性和长江流域系统性出发坚持山水林田湖草沙综合治理系统治理源头治理共抓大保护不搞大开发探索出一条生态优先绿色发展新路子长江经济带生态环境保护发生了转折性变化推动长江经济带绿色低碳高质量发展";

// console.log(con.length)  232   - 22 = 210   209 + 22 = 231
// 1 给add按钮绑定点击事件
$(".add").onclick = function(){
    // 1 创建div元素 且class为tag
    var tag = document.createElement("div");
    // 2 给tag设置class属性 确保样式
    tag.setAttribute("class" , "tag")
    // 3 给tag设置内容 内容是随机的
    tag.innerHTML = con.substr( randomNum(0 , 209) , randomNum(10 , 22) ) + "<span>&times;</span>"
    // console.log(tag)
    // 4 将创建好的div标签追加再 con 的最后
    $(".con").appendChild(tag)

    // 5 直接获取当前 创建的tag下的span 直接绑定事件
    var del = tag.lastElementChild;
    del.onclick = function(){
        // el.remove() 删除当前元素  jquery的方法
        del.parentNode.remove()
    }
}

// 给删除全部点击事件  即 con 直接赋值 ""
$(".clear").onclick = function(){
    $(".con").innerHTML = ""
}

// 随机数函数
function randomNum(min,max){
    return Math.floor(Math.random() * (max - min + 1) + min)
}

// 封装获取元素的函数
function $(el){
    return document.querySelector(el)
}